<template>
<!-- 结算页 -->
  <div>
    <!-- 头部 -->
    <header>
      <van-row class="ACCountheaderBox">
        <van-col span="12">
          <van-row class="textBox" @click="backCart">
            <van-col offset="2" class="paddingAC">
              <van-icon name="arrow-left" size="1.5rem" color="#fff" />
            </van-col>
            <van-col offset="1" class="textStyle"> 订单提交 </van-col>
          </van-row>
        </van-col>
      </van-row>
    </header>
    <!-- 内容部分 -->
    <section>
      <!-- 收货地址add -->
      <van-row class="fistContentBox">
        <van-col offset="1" span="22"> 收货信息 </van-col>
        <van-col offset="2" span="20" class="addSite">
          <van-button type="primary" size="large" class="buttonStyle" @click="selectAdderssNext">
            <van-icon name="plus" color="#fff" />添加收货地址
          </van-button>
        </van-col>
      </van-row>
      <!-- 商铺信息及商品信息 -->
      <section>
        <!--商铺信息 -->
        <van-row>
          <van-col span="24" class="borderStyleTop ">
            <van-row>
              <van-col offset="1" span="23">
                <van-icon name="label-o" />
                XXX商铺
              </van-col>
            </van-row>
          </van-col>
        </van-row>
        <!--  商品信息-->
        <van-row class="marginTopSamll borderStyleTop">
          <van-col offset="1" span="5">
            <van-image
              width="80"
              height="80"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
          </van-col>
          <van-col offset="1" span="17" class="marginTopMax">
            <van-row>
              <van-col class="fontSizemax"> 黑美人西瓜鲜美多汁2个起卖 </van-col>
            </van-row>
            <van-row>
              <van-col class="fontSizeSmall goodsbgcStly">
                独立包装（1个装）X1
              </van-col>
            </van-row>
            <van-row>
              <van-col class="goodsPrice"> ￥38.8 </van-col>
            </van-row>
          </van-col>
        </van-row>
        <!-- 配送 -->
        <van-row class="borderStyleTop marginTopSamll" @click="deliveryShow">
          <van-col offset="1" span="5"> 配送方式 </van-col>
          <van-col span="15" class="fontSizeSmall paddingTopSamll">
            配送费￥10.00 商家配送
          </van-col>
          <van-col offset="1" span="2" class="paddingTopSamll"
            ><van-icon name="arrow"
          /></van-col>
        </van-row>
        <!-- 优惠 -->
        <van-row class="borderStyleTop marginTopSamll"  @click="discountsShow">
          <van-col offset="1" span="5"> 店铺优惠 </van-col>
          <van-col span="15" class="fontSizeSmall paddingTopSamll">
            优惠￥10.00
          </van-col>
          <van-col offset="1" class="paddingTopSamll"
            ><van-icon name="arrow"
          /></van-col>
        </van-row>
        <!-- 发票 -->
        <van-row class="borderStyleTop marginTopSamll" @click="invoiceifoboxShow">
          <van-col offset="1" span="7"> 是否开具发票 </van-col>
          <van-col span="13" class="fontSizeSmall paddingTopSamll">
            普通发票
          </van-col>
          <van-col offset="1" class="paddingTopSamll"
            ><van-icon name="arrow"
          /></van-col>
        </van-row>
        <!-- 小计 -->
        <van-row class="borderStyleTop marginTopSamll">
          <van-col offset="15"> 小计： </van-col>
          <van-col class="goodsPrice"> ￥106.35 </van-col>
        </van-row>
        <!-- 留言 -->
        <van-row class="borderStyleTop borderStyleBottom marginBottom">
          <!-- <van-col span="6">给用户留言</van-col> -->
          <van-col span="24" class="fontSizemax">
            <van-form>
              <van-col offset="1" class="marginTopSamll" span="6"
                >给用户留言:</van-col
              >
              <van-col span="14">
                <van-field v-model="username" name="name" placeholder="XXXX" />
              </van-col>
            </van-form>
          </van-col>
        </van-row>
        <!-- 平台优惠 -->
      </section>
      <!-- 商铺信息及商品信息 -->
      <section>
        <!--商铺信息 -->
        <van-row>
          <van-col span="24" class="borderStyleTop ">
            <van-row>
              <van-col offset="1" span="23">
                <van-icon name="label-o" />
                XXX商铺
              </van-col>
            </van-row>
          </van-col>
        </van-row>
        <!--  商品信息-->
        <van-row class="marginTopSamll borderStyleTop">
          <van-col offset="1" span="5">
            <van-image
              width="80"
              height="80"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
          </van-col>
          <van-col offset="1" span="17" class="marginTopMax">
            <van-row>
              <van-col class="fontSizemax"> 黑美人西瓜鲜美多汁2个起卖 </van-col>
            </van-row>
            <van-row>
              <van-col class="fontSizeSmall goodsbgcStly">
                独立包装（1个装）X1
              </van-col>
            </van-row>
            <van-row>
              <van-col class="goodsPrice"> ￥38.8 </van-col>
            </van-row>
          </van-col>
        </van-row>
        <!-- 配送 -->
        <van-row class="borderStyleTop marginTopSamll" @click="deliveryShow">
          <van-col offset="1" span="5"> 配送方式 </van-col>
          <van-col span="15" class="fontSizeSmall paddingTopSamll">
            配送费￥10.00 商家配送
          </van-col>
          <van-col offset="1" span="2" class="paddingTopSamll"
            ><van-icon name="arrow"
          /></van-col>
        </van-row>
        <!-- 优惠 -->
        <van-row class="borderStyleTop marginTopSamll"  @click="discountsShow">
          <van-col offset="1" span="5"> 店铺优惠 </van-col>
          <van-col span="15" class="fontSizeSmall paddingTopSamll">
            优惠￥10.00
          </van-col>
          <van-col offset="1" class="paddingTopSamll"
            ><van-icon name="arrow"
          /></van-col>
        </van-row>
        <!-- 发票 -->
        <van-row class="borderStyleTop marginTopSamll" @click="invoiceifoboxShow">
          <van-col offset="1" span="7"> 是否开具发票 </van-col>
          <van-col span="13" class="fontSizeSmall paddingTopSamll">
            普通发票
          </van-col>
          <van-col offset="1" class="paddingTopSamll"
            ><van-icon name="arrow"
          /></van-col>
        </van-row>
        <!-- 小计 -->
        <van-row class="borderStyleTop marginTopSamll">
          <van-col offset="15"> 小计： </van-col>
          <van-col class="goodsPrice"> ￥106.35 </van-col>
        </van-row>
        <!-- 留言 -->
        <van-row class="borderStyleTop borderStyleBottom marginBottom">
          <!-- <van-col span="6">给用户留言</van-col> -->
          <van-col span="24" class="fontSizemax">
            <van-form>
              <van-col offset="1" class="marginTopSamll" span="6"
                >给用户留言:</van-col
              >
              <van-col span="14">
                <van-field v-model="username" name="name" placeholder="XXXX" />
              </van-col>
            </van-form>
          </van-col>
        </van-row>
        <!-- 平台优惠 -->
      </section>
     

      <!-- 平台优惠 -->
      <section>
        <van-row
          class="marginTopMax borderStyleBottom borderStyleTop discounts marginBottomMax" @click="platformInvoiceShow"
        >
          <van-col offset="1" span="5">平台优惠 </van-col>
          <van-col span="14" class="fontSizeSmall paddingTopSamll goodsPrice">
            优惠￥10.00
          </van-col>
          <van-col
            offset="1"
            span="3"
            class="paddingTopSamll paddingleftDiscounts"
            ><van-icon name="arrow"
          /></van-col>
        </van-row>
      </section>
    </section>
    <footer>
      <van-row class="pay">
        <van-col span="24">
          <!-- 条款知晓 -->
          <van-row class="bgcColorCCC">
            <van-col offset="1" span="23" class="marginTopSamll">
              <van-checkbox v-model="checked"
                >我已了解并知晓规则条款</van-checkbox
              >
            </van-col>
            <!-- 提交订单 -->
          </van-row>
          <!-- 结算 -->
          <van-row class="marginTopSamll ">
            <van-col offset="1" class="marginTopSamll" >共3件，合计金额： </van-col>
            <van-col class="marginTopSamll goodsPrices ">￥155.52 </van-col>
            <van-col offset="2"><van-button type="primary" @click="submite">提交订单</van-button> </van-col>
          </van-row>
        </van-col>
      </van-row>
    </footer>
    <!-- 页面弹窗组件 -->
    <!-- 配送方式弹窗 -->
    <van-popup v-model="delivery" position="bottom"  :style="{ height: '27%' }" >
      <deliverybox  @deliveryH="deliveryHandle"/>
    </van-popup>
    <!-- 店铺优惠弹窗 -->
    <van-popup v-model="discounts" position="bottom"  :style="{ height: '41%' }" >
      <discountsbox @discountsH="discountsHandle"/>
    </van-popup>
    <!-- 发票弹窗 -->
    <van-popup v-model="invoiceifo" position="bottom"  :style="{ height: '27%' }" >
      <invoiceifobox @invoiceIfoH="invoiceifoHandle"/>
    </van-popup>
    <!-- 平台信息弹窗 -->
    <van-popup v-model="platformInvoice" position="bottom"  :style="{ height: '41%' }" >
      <platforminvoicebox @platformInvoiceH="platformInvoiceHandle"/>
    </van-popup>
    <!-- 须知判断 -->
    <van-popup v-model="readMeshow" class="AcpaddingSamll">请阅读并确认条款内容</van-popup>
  </div>
</template>

<script>
import deliverybox from  "../../components/cart/deliverybox.vue"
import discountsbox from  "../../components/cart/discounts.vue"
import invoiceifobox from  "../../components/cart/invoiceifo.vue"
import platforminvoicebox from  "../../components/cart/platformInvoice.vue"
export default {
  data() {
    return {
      username: "",
      password: "",
      checked: false,
      delivery:false,
      discounts:false,
      invoiceifo:false,
      platformInvoice:false,
      readMeshow:false,
    };
  },
  methods: {
    backCart() {
      this.$router.back();
    },
    deliveryShow(){
      this.delivery=true
    },
    deliveryHandle(str){
      this.delivery=str
    },
    discountsShow(){
      // console.log("111");
      this.discounts=true
    },
     discountsHandle(str){
      this.discounts=str
    },
    invoiceifoboxShow(){
      this.invoiceifo=true
    },
     invoiceifoHandle(str){
      this.invoiceifo=str
    },
    platformInvoiceShow(){
      this.platformInvoice=true
    },
    platformInvoiceHandle(str){
      this.platformInvoice=str
    },
    // 提交订单
    submite(){
      if(this.checked===false){
        this.readMeshow=true
      }else{
        this.$router.push('/submitOrder')
      }
    },
    // 选择收货地址
    selectAdderssNext(){
      this.$router.push('/selectAdderss')
    },
    // 须知判断

  },
    components: {
    deliverybox,
    discountsbox,
    invoiceifobox,
    platforminvoicebox,
  },
};
</script>

<style less>
.ACCountheaderBox {
  height: 35px;
  width: 100%;
  top: 0;
  background-color: #4bd863;
  position: fixed;
  z-index: 1000;
  padding: 10px 0;
}
.paddingAC{
  margin-top: 2px;
}
.textBox {
  height: 35px;
  line-height: 45px;
  font-size: 20px;
  /* margin-top: 50px; */
}
.textStyle {
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
}
.fistContentBox {
  height: 100px;
  border: 2px dashed #4bd863;
  margin:60px 5px 10px 5px;
}
.buttonStyle {
  height: 35px;
}
.addSite {
  margin-top: 30px;
}
.borderStyleTop {
  border-top: 1px solid #ccc;
}
.borderStyleBottom {
  border-bottom: 1px solid #ccc;
}
.marginTopSamll {
  margin-top: 5px;
  padding: 5px;
}
.marginTopMax {
  margin-top: 15px;
  padding: 5px;
}
.paddingTopSamll {
  padding-top: 5px;
}
.AcpaddingSamll {
  padding: 15px 12px;
  border-radius: 5px;
  color: rgb(77, 75, 75);
}
.marginBottom {
  margin-bottom: 15px;
}
.marginBottomMax {
  margin-bottom: 90px;
}
.fontSizeSmall {
  font-size: 15px;
  color: rgb(68, 68, 68);
}

.fontSizemax {
  font-size: 15px;
}
.goodsbgcStly {
  background-color: rgba(211, 211, 211, 0.829);
  border-radius: 2px;
  padding: 2px;
  color: rgb(83, 81, 81);
}
.goodsPrice {
  font-weight: 700;
  color: red;
}
.discounts {
  background-color: #ffffcc;
  padding: 15px 0px;
}
.paddingleftDiscounts {
  padding-left: 6px;
}
.bgcColorCCC {
  /* background-color: rgba(230, 222, 224, 0.774); */
  background-color: rgb(248, 248, 248);
  /* margin-bottom: 55px; */
}
.pay{
  position:fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
}
</style>